﻿@each $name, $value in $theme-colors {
    $color: $value;

    .stepper {
        &-#{$name} {

            &.done {
                .stepper-icon {
                    background-color: $color;
                }

                .stepper-text {
                    color: $color;
                }
            }

            &.active {
                .stepper-icon {
                    background-color: $primary;
                    color: $white;
                }

                .stepper-text {
                    color: $color;
                }
            }

            .stepper-icon {
                background-color: $color;
            }

            .stepper-text {
                color: $color;
            }
        }
    }
}

.stepper-horiz-content {
    > .stepper-panel {
        display: none;
    }

    > .active {
        display: block;
    }
}
